<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../css/register.css" />
    <link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
    <script src="../../js/vue-v2.6.10.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
    <script src="../../element-ui-2.13.0/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <div class="pos">
            <div class="login">
                <span class="close iconfont icon-close"></span>
                <img src="../../img/login/loginlogo.png" alt="">
                <ul>
                    <li></li>
                    <li style="margin-bottom: 30px;font-size: 16px;color: red;" v-text="msg"></li>
                    <li></li>
                </ul>
                <form action="" method="post" id="form">
                    <input type="text" id="" placeholder="请输入姓名" v-model="data.name" @blur="checkName">
                    <input type="text" placeholder="请输入您的手机号" v-model="data.phone" @blur="checkPhone">
                    <input type="password" id="" placeholder="请再次输入密码" v-model="data.password" @blur="checkPassword">
                    <input type="text" class="yanzhen" placeholder="请输入验证码" v-model="val_code" @blur="checkCode">
                    <span class="yanzhenma" v-text="code" @click="init_code"></span>
                    <div class="clear"></div>
                    <div class="loginbtn" style="margin-left: 110px;line-height: 40px;" @click="register">注册</div>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: '',
            code: '',
            val_code: '',
            data: {
                name: '',
                phone: '',
                password: ''
            }
        },
        methods: {
            checkName() {
                if (this.data.name == null || this.data.name.trim() == '') {
                    this.msg = "请输入姓名！";
                } else {
                    this.msg = '';
                }
            },
            checkPhone() {
                if (this.data.phone == null || this.data.phone.trim() == '') {
                    this.msg = "请输入手机号！";
                } else {
                    var reg = /^1[3|5|7|8|9][0-9]{9}$/;
                    if (reg.test(this.data.phone)) {
                        axios.post('http://192.168.194.223:8080/edu/user?flag=checkPhone&phone=' + this.data.phone).then(obj => {
                            if (obj.data) {
                                this.msg = "";
                            } else {
                                this.msg = "该手机号已注册";
                            }
                        });
                    } else {
                        this.msg = "请输入正确的手机号";
                    }
                }
            },
            checkPassword() {
                if (this.data.password == null || this.data.password.trim() == '') {
                    this.msg = "请输入密码";
                } else {
                    this.msg = "";
                }
            },
            checkCode() {
                if (this.val_code == null || this.val_code.trim() == '') {
                    this.msg = "请输入验证码";
                } else {
                    if (this.val_code.toLowerCase() == this.code.toLowerCase()) {
                        this.msg = "";
                    } else {
                        this.msg = "请输入正确的验证码";
                    }
                }
            },
            init_code() {
                var code = '';
                var a = "23456789abcdefghjklmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
                for (var i = 0; i < 4; i++) {
                    code += a.charAt(Math.floor(Math.random() * a.length));
                }
                this.code = code;
            },
            checkMsg() {
                if (this.msg == null || this.msg.trim() == '') {
                    return true;
                } else {
                    return false;
                }
            },
            register() {
                this.checkName();
                if (this.checkMsg()) {
                    this.checkPhone();
                    if (this.checkMsg()) {
                        this.checkPassword();
                        if (this.checkMsg()) {
                            this.checkCode();
                            if (this.checkMsg()) {
                                axios({
                                    method: "post",
                                    url: 'http://192.168.194.223:8080/edu/user',
                                    data: this.data,
                                    params: {
                                        flag: 'register'
                                    }
                                }).then(res => {
                                    if (res.data) {
                                        this.$message.success("恭喜您，注册成功");
                                        setTimeout("location.href = 'login.html'", 1000);
                                    } else {
                                        this.$message.error("不好意思，注册失败，请稍后再试!");
                                    }
                                });
                            }
                        }
                    }
                }
            }
        },
        created() {
            this.init_code();
        }

    })
</script>


</html>